<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>会员分析</h3>
			<h4>留存分析</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">			
			<div class="biz-member-filter">
				<dl>
					<span>时间维度</span>
					<a href="" data-type="1" class="active">30天</a>
					<a href="" data-type="1" class="">自然月</a>
					<i class="fa fa-question-circle fa-2x"></i>
				</dl>
				<dl>
					<span>分析维度</span>
					<a href="" data-type="1" class="active">消费频次</a>
					<a href="" data-type="1" class="">消费升数</a>
					<i class="fa fa-question-circle fa-2x"></i>
				</dl>
				<dl>
					<span>时间范围</span>
					<a href="" data-type="1" class="active">昨天</a>					
					<a href="" data-type="1" class="">2017-09-06</a>
					<i class="fa fa-question-circle fa-2x"></i>
				</dl>				
			</div>
			<div class="biz-tubiao-nob">
				<dl  id="main"></dl>
				<dl  id="main1"></dl>
				<dl  id="main2"></dl>
				<dl  id="main3"></dl>
				<dl  style="width:1020px;height: 300px;" id="main4"></dl>
			</div>		
			
		</div>
			
		<!--/deer-content-->
	</section>
	<!--js-->
		<aside>
			<script type="text/javascript" src="../layui/layui.js" ></script>
			<script type="text/javascript" src="../js/echarts.min.js" ></script>
			<script type="text/javascript">
				layui.use(['jquery'],function(){				
					var $=layui.jquery;					
					$('.biz-member-filter a').bind('click',function(){
				    	$(this).addClass('active').siblings().removeClass('active')
				    	return false
			    	})
				})				
				// 基于准备好的dom，初始化echarts实例
			    var myChart = echarts.init(document.getElementById('main'));
			    option = {
			        tooltip: {
			            trigger: 'item',
			            formatter: "{a} <br/>{b}: {c} ({d}%)"
			        },
			        legend: {
			            orient: 'vertical',
			            x: 'left',
			            data:['总量','低频用户']
			        },
			        series: [
			            {
			                name:'客户量',
			                type:'pie',
			                selectedMode: 'single',
			                radius: [0, '30%'],
			
			                label: {
			                    normal: {
			                        position: 'inner'
			                    }
			                },
			                labelLine: {
			                    normal: {
			                        show: false
			                    }
			                },
			                data:[
			                    {value:1000, name:'总量' },
			                    {value:20, name:'低频用户'},
			                ]
			            },
			            {
			                name:'加油客户',
			                type:'pie',
			                radius: ['40%', '55%'],
			                label: {
			                    normal: {
			                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
			                        backgroundColor: '#eee',
			                        borderColor: '#aaa',
			                        borderWidth: 1,
			                        borderRadius: 4,
			                        // shadowBlur:3,
			                        // shadowOffsetX: 2,
			                        // shadowOffsetY: 2,
			                        // shadowColor: '#999',
			                        // padding: [0, 7],
			                        rich: {
			                            a: {
			                                color: '#aaa',
			                                lineHeight:12,
			                                align: 'center'
			                            },
			                            abg: {
			                                backgroundColor: '#333',
			                                width: '100%',
			                                align: 'right',
			                                height: 12,
			                                borderRadius: [4, 4, 0, 0]
			                            },
			                            hr: {
			                                borderColor: '#aaa',
			                                width: '100%',
			                                borderWidth: 0.5,
			                                height: 0
			                            },
			                            b: {
			                                fontSize: 12,
			                                lineHeight: 12
			                            },
			                            per: {
			                                color: '#eee',
			                                backgroundColor: '#334455',
			                                padding: [2, 4],
			                                borderRadius: 2
			                            }
			                        }
			                    }
			                },
			                data:[
			                    {value:335, name:'总数'},
			
			                ]
			            }
			        ]
			    };
			    myChart.setOption(option);

			    var myChart1 = echarts.init(document.getElementById('main1'));
			    option = {
			        tooltip: {
			            trigger: 'item',
			            formatter: "{a} <br/>{b}: {c} ({d}%)"
			        },
			        legend: {
			            orient: 'vertical',
			            x: 'left',
			            data:['总量','中频用户']
			        },
			        series: [
			            {
			                name:'客户量',
			                type:'pie',
			                selectedMode: 'single',
			                radius: [0, '30%'],
			
			                label: {
			                    normal: {
			                        position: 'inner'
			                    }
			                },
			                labelLine: {
			                    normal: {
			                        show: false
			                    }
			                },
			                data:[
			                    {value:500, name:'总量' },
			                    {value:200, name:'中频用户'},
			                ]
			            },
			            {
			                name:'加油客户',
			                type:'pie',
			                radius: ['40%', '55%'],
			                label: {
			                    normal: {
			                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
			                        backgroundColor: '#eee',
			                        borderColor: '#aaa',
			                        borderWidth: 1,
			                        borderRadius: 4,
			
			                        rich: {
			                            a: {
			                                color: '#aaa',
			                                lineHeight:12,
			                                align: 'center'
			                            },
			                            abg: {
			                                backgroundColor: '#333',
			                                width: '100%',
			                                align: 'right',
			                                height: 12,
			                                borderRadius: [4, 4, 0, 0]
			                            },
			                            hr: {
			                                borderColor: '#aaa',
			                                width: '100%',
			                                borderWidth: 0.5,
			                                height: 0
			                            },
			                            b: {
			                                fontSize: 12,
			                                lineHeight: 12
			                            },
			                            per: {
			                                color: '#eee',
			                                backgroundColor: '#334455',
			                                padding: [2, 4],
			                                borderRadius: 2
			                            }
			                        }
			                    }
			                },
			                data:[
			                    {value:500, name:'总数'},
			
			                ]
			            }
			        ]
			    };
			    myChart1.setOption(option);
			    
			    var myChart2 = echarts.init(document.getElementById('main2'));
			    option = {
			        tooltip: {
			            trigger: 'item',
			            formatter: "{a} <br/>{b}: {c} ({d}%)"
			        },
			        legend: {
			            orient: 'vertical',
			            x: 'left',
			            data:['总量','中高频用户']
			        },
			        series: [
			            {
			                name:'客户量',
			                type:'pie',
			                selectedMode: 'single',
			                radius: [0, '30%'],
			
			                label: {
			                    normal: {
			                        position: 'inner'
			                    }
			                },
			                labelLine: {
			                    normal: {
			                        show: false
			                    }
			                },
			                data:[
			                    {value:335, name:'总量' },
			                    {value:20, name:'中高频用户'},
			                ]
			            },
			            {
			                name:'加油客户',
			                type:'pie',
			                radius: ['40%', '55%'],
			                label: {
			                    normal: {
			                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
			                        backgroundColor: '#eee',
			                        borderColor: '#aaa',
			                        borderWidth: 1,
			                        borderRadius: 4,
			
			                        rich: {
			                            a: {
			                                color: '#aaa',
			                                lineHeight:12,
			                                align: 'center'
			                            },
			                            abg: {
			                                backgroundColor: '#333',
			                                width: '100%',
			                                align: 'right',
			                                height: 12,
			                                borderRadius: [4, 4, 0, 0]
			                            },
			                            hr: {
			                                borderColor: '#aaa',
			                                width: '100%',
			                                borderWidth: 0.5,
			                                height: 0
			                            },
			                            b: {
			                                fontSize: 12,
			                                lineHeight: 12
			                            },
			                            per: {
			                                color: '#eee',
			                                backgroundColor: '#334455',
			                                padding: [2, 4],
			                                borderRadius: 2
			                            }
			                        }
			                    }
			                },
			                data:[
			                    {value:335, name:'总数'},
			
			                ]
			            }
			        ]
			    };
			    myChart2.setOption(option);
			    
			    var myChart3 = echarts.init(document.getElementById('main3'));
			    option = {
			        tooltip: {
			            trigger: 'item',
			            formatter: "{a} <br/>{b}: {c} ({d}%)"
			        },
			        legend: {
			            orient: 'vertical',
			            x: 'left',
			            data:['总量','高频用户']
			        },
			        series: [
			            {
			                name:'客户量',
			                type:'pie',
			                selectedMode: 'single',
			                radius: [0, '30%'],
			
			                label: {
			                    normal: {
			                        position: 'inner'
			                    }
			                },
			                labelLine: {
			                    normal: {
			                        show: false
			                    }
			                },
			                data:[
			                    {value:335, name:'总量' },
			                    {value:20, name:'高频用户'},
			                ]
			            },
			            {
			                name:'加油客户',
			                type:'pie',
			                radius: ['40%', '55%'],
			                label: {
			                    normal: {
			                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
			                        backgroundColor: '#eee',
			                        borderColor: '#aaa',
			                        borderWidth: 1,
			                        borderRadius: 4,
			
			                        rich: {
			                            a: {
			                                color: '#aaa',
			                                lineHeight:12,
			                                align: 'center'
			                            },
			                            abg: {
			                                backgroundColor: '#333',
			                                width: '100%',
			                                align: 'right',
			                                height: 12,
			                                borderRadius: [4, 4, 0, 0]
			                            },
			                            hr: {
			                                borderColor: '#aaa',
			                                width: '100%',
			                                borderWidth: 0.5,
			                                height: 0
			                            },
			                            b: {
			                                fontSize: 12,
			                                lineHeight: 12
			                            },
			                            per: {
			                                color: '#eee',
			                                backgroundColor: '#334455',
			                                padding: [2, 4],
			                                borderRadius: 2
			                            }
			                        }
			                    }
			                },
			                data:[
			                    {value:335, name:'总数'},
			                ]
			            }
			        ]
			    };
			    myChart3.setOption(option);

			    var myChart4 = echarts.init(document.getElementById('main4'));
			    option = {
			        title : {
			            text: '留存对比',
			            subtext: '客户消费水平对比'
			        },
			        tooltip : {
			            trigger: 'axis'
			        },
			        legend: {
			            data:['上周期消费人数','当前周期消费人数']
			        },
			        toolbox: {
			            show : true,
			            feature : {
			                dataView : {show: true, readOnly: false},
			                magicType : {show: true, type: ['line', 'bar']},
			                restore : {show: true},
			                saveAsImage : {show: true}
			            }
			        },
			        calculable : true,
			        xAxis : [
			            {
			                type : 'category',
			                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
			            }
			        ],
			        yAxis : [
			            {
			                type : 'value'
			            }
			        ],
			        series : [
			            {
			                name:'上周期消费人数',
			                type:'bar',
			                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
			                markPoint : {
			                    data : [
			                        {type : 'max', name: '最大值'},
			                        {type : 'min', name: '最小值'}
			                    ]
			                },
			                markLine : {
			                    data : [
			                        {type : 'average', name: '平均值'}
			                    ]
			                }
			            },
			            {
			                name:'当前周期消费人数',
			                type:'bar',
			                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
			                markPoint : {
			                    data : [
			                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
			                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
			                    ]
			                },
			                markLine : {
			                    data : [
			                        {type : 'average', name : '平均值'}
			                    ]
			                }
			            }
			        ]
			    };			
			    myChart4.setOption(option);

		</script>
	</aside>
		<!--/js-->
</body>
</html>
